<template>
    <div class="homeContent">
        <div class="topInfo">
            <div class="zzc">
                <div class="item">
                    <div class="itemText">今日总收入</div>
                    <div class="val">{{ accountDetail.totalIncome }}</div>
                </div>
                <div class="item">
                    <div class="itemText">今日总流水</div>
                    <div class="val">{{ accountDetail.totalFlow }}</div>
                </div>
                <div class="item">
                    <div class="itemText">今日总支出</div>
                    <div class="val">{{ accountDetail.totalExpense }}</div>
                </div>
            </div>
            <div class="itemList">
                <div class="item">
                    <div class="itemText">今日收入笔数</div>
                    <div class="val">
                        {{ accountDetail.totalIncomeCount }}
                    </div>
                </div>
                <div class="item">
                    <div class="itemText">今日交易总笔数</div>
                    <div class="val">{{ accountDetail.totalTransactionCount }}</div>
                </div>
                <div class="item">
                    <div class="itemText">今日支出总笔数</div>
                    <div class="val">{{ accountDetail.totalExpenseCount }}</div>
                </div>
            </div>
        </div>
        <div class="more">
            <div class="left">
                <van-popover v-model="showType" trigger="click" :actions="typeActions" @select="onTypeSelect">
                    <template #reference>
                        <span class="lable">{{ typeText }}</span>
                        <van-icon name="descending" />
                    </template>
                </van-popover>
            </div>

            <div class="right">
                账单管理
            </div>
        </div>
        <div class="middleInfo">
            <div class="itemList">
                <div class="item" v-for="(item, index) in showItemList" :key="index">
                    <div class="img">
                        <!-- <img src="../../assets/img/zfb.jpg" alt=""> -->
                        <svg class="icon" v-if="item.accountName == '支付宝'"
                            style="width: 50px;height: 50px;vertical-align: middle;fill: currentColor;overflow: hidden;"
                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M1024.0512 701.0304V196.864A196.9664 196.9664 0 0 0 827.136 0H196.864A196.9664 196.9664 0 0 0 0 196.864v630.272A196.9152 196.9152 0 0 0 196.864 1024h630.272a197.12 197.12 0 0 0 193.8432-162.0992c-52.224-22.6304-278.528-120.32-396.4416-176.64-89.7024 108.6976-183.7056 173.9264-325.3248 173.9264s-236.1856-87.2448-224.8192-194.048c7.4752-70.0416 55.552-184.576 264.2944-164.9664 110.08 10.3424 160.4096 30.8736 250.1632 60.5184 23.1936-42.5984 42.496-89.4464 57.1392-139.264H248.064v-39.424h196.9152V311.1424H204.8V267.776h240.128V165.632s2.1504-15.9744 19.8144-15.9744h98.4576V267.776h256v43.4176h-256V381.952h208.8448a805.9904 805.9904 0 0 1-84.8384 212.6848c60.672 22.016 336.7936 106.3936 336.7936 106.3936zM283.5456 791.6032c-149.6576 0-173.312-94.464-165.376-133.9392 7.8336-39.3216 51.2-90.624 134.4-90.624 95.5904 0 181.248 24.4736 284.0576 74.5472-72.192 94.0032-160.9216 150.016-253.0816 150.016z"
                                fill="#009FE8" />
                        </svg>
                        <svg class="icon" v-if="item.accountName == '微信'"
                            style="width: 50px;height: 50px;vertical-align: middle;fill: currentColor;overflow: hidden;"
                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                                fill="#28C445" />
                            <path
                                d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                                fill="#28C445" />
                        </svg>
                    </div>
                    <div @click="handleEdit(item)" :class="['info', item.type == '2' ? 'system' : '']">
                        <div class="top">
                            <span>金额</span>
                            <span>时间</span>
                            <span>类型</span>
                        </div>
                        <div class="total">
                            <span :class="[item.transactionAttribute == '-1' ? 'on' : 'off']">{{
                                item.transactionAttribute ==
                                    '-1' ? '-' : '+' }}{{
                                    item.amount + ''
                                }}</span>
                            <span>{{ item.createTime }}</span>
                            <span>{{ item.source }}</span>
                            <van-icon color="#007aff" :size="'30px'" v-if="item.type == '2'" name="balance-list" />
                        </div>
                    </div>
                    <div class="del">
                        <van-icon name="delete-o" color="red" @click="handleDel(item)" />

                    </div>
                </div>
            </div>
        </div>
        <van-icon @click="handlePop" class="add" name="add-o" :size="'80px'" />

        <van-dialog class="accountDialog" v-model="showPop" title="记一笔" show-cancel-button
            @confirm="handleDialogConfirm" @cancel="handleCancel">
            <div class="content">
                <van-popover v-model="showPopover" trigger="click" :actions="actions" @select="onSelect">
                    <template #reference>
                        <van-button>选择交易账户</van-button>
                    </template>
                </van-popover>
                <div class="account">
                    <svg class="icon" v-if="showAccount == '支付宝'"
                        style="width: 50px;height: 50px;vertical-align: middle;fill: currentColor;overflow: hidden;"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M1024.0512 701.0304V196.864A196.9664 196.9664 0 0 0 827.136 0H196.864A196.9664 196.9664 0 0 0 0 196.864v630.272A196.9152 196.9152 0 0 0 196.864 1024h630.272a197.12 197.12 0 0 0 193.8432-162.0992c-52.224-22.6304-278.528-120.32-396.4416-176.64-89.7024 108.6976-183.7056 173.9264-325.3248 173.9264s-236.1856-87.2448-224.8192-194.048c7.4752-70.0416 55.552-184.576 264.2944-164.9664 110.08 10.3424 160.4096 30.8736 250.1632 60.5184 23.1936-42.5984 42.496-89.4464 57.1392-139.264H248.064v-39.424h196.9152V311.1424H204.8V267.776h240.128V165.632s2.1504-15.9744 19.8144-15.9744h98.4576V267.776h256v43.4176h-256V381.952h208.8448a805.9904 805.9904 0 0 1-84.8384 212.6848c60.672 22.016 336.7936 106.3936 336.7936 106.3936zM283.5456 791.6032c-149.6576 0-173.312-94.464-165.376-133.9392 7.8336-39.3216 51.2-90.624 134.4-90.624 95.5904 0 181.248 24.4736 284.0576 74.5472-72.192 94.0032-160.9216 150.016-253.0816 150.016z"
                            fill="#009FE8" />
                    </svg>
                    <svg class="icon" v-if="showAccount == '微信'"
                        style="width: 50px;height: 50px;vertical-align: middle;fill: currentColor;overflow: hidden;"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                            fill="#28C445" />
                        <path
                            d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                            fill="#28C445" />
                    </svg>
                    {{ showAccount }}
                </div>
                <van-form @submit="onSubmit">
                    <van-field name="switch" label="记为收入">
                        <template #input>
                            <van-switch v-model="switchChecked" size="20" />
                        </template>
                    </van-field>
                    <van-field v-model="shouru" name="金额" label="金额" placeholder="请填写金额"
                        :rules="[{ required: true, message: '请填写金额' }]" />
                    <van-field readonly clickable name="datetimePicker" :value="timeVal" label="交易时间"
                        placeholder="点击选择时间" @click="showPicker = true" />
                    <van-popup v-model="showPicker" position="bottom">
                        <van-datetime-picker :formatter="formatter" v-model="timeVal" type="datetime"
                            @confirm="onConfirm" @cancel="showPicker = false" />
                    </van-popup>
                    <van-field v-model="org" name="来源" label="来源" placeholder="请填写来源"
                        :rules="[{ required: true, message: '请填写来源' }]" />
                    <van-field v-model="label" name="备注" label="备注" placeholder="请填写备注"
                        :rules="[{ required: true, message: '请填写备注' }]" />
                </van-form>
            </div>
        </van-dialog>
        <div class="bottomInfo">
            <van-tabbar v-model="active">
                <van-tabbar-item icon="home-o" @click="handleRoute('home')">主页</van-tabbar-item>
                <van-tabbar-item icon="search" @click="handleRoute('accounting')">记账</van-tabbar-item>
                <van-tabbar-item icon="friends-o" @click="handleRoute('my')">我的</van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs'; // 导入 dayjs 用于格式化时间
import { Dialog, Toast } from 'vant';
import { getAccount } from "@/api/my"
import { addAccountData, getAccountData, getAccountStatis, updateAccountData, delAccount } from "@/api/accounting"
export default {
    data() {
        return {
            detailId: '',
            accountDetail: {},
            typeText: '全部',
            showType: false,
            typeActions: [{ text: '全部', val: 0 }, { text: '收入', val: 1 }, { text: '支出', val: -1 }],
            accountId: '',
            switchChecked: false,
            showAccount: "请选择账户",
            shouru: "",
            showPopover: false,
            show: false,
            active: 1,
            showPop: false,
            accountVal: 0
            ,
            showPicker: false,
            timeVal: new Date(),
            org: '',
            label: '',
            actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
            option1: [
                { text: '支付宝', value: 0 },
                { text: '微信', value: 1 },
                { text: '银联', value: 2 },
            ],
            itemList: [

            ],
            showItemList: []
        }
    },
    created() {
        this.getAccountList()
        this.getAccountData()
        this.getAccountStatis()
    },
    methods: {
        handleCancel() {
            this.showAccount = ''
            this.accountId = ''
            this.switchChecked = ''
            this.shouru = ''
            this.timeVal = ''
            this.org = ''
            this.label = ''
            this.detailId = ''
            this.typeText = '全部'

        },
        handleEdit(item) {
            console.log(item);
            this.showPop = true
            this.showAccount = item.accountName
            this.accountId = item.accountId
            this.switchChecked = item.transactionAttribute == '-1' ? false : true
            this.shouru = item.amount
            this.timeVal = item.transactionTime.replace('T', ' ')
            this.org = item.source
            this.label = item.remark
            this.detailId = item.id
        },
        async getAccountStatis() {
            const res = await getAccountStatis()
            console.log(res, 'rrrrr');
            this.accountDetail = res.data

        },
        onTypeSelect(v) {
            this.typeText = v.text;
            if (v.text == '全部') {
                this.showItemList = this.itemList
                return
            }
            this.showItemList = this.itemList.filter(item => {
                if (item.transactionAttribute == v.val) {
                    return true
                }
            })

        },
        async getAccountData() {
            const res = await getAccountData()
            console.log(res, 'res11');
            this.itemList = res.data.map(item => {
                return {
                    ...item,
                    createTime: item.createTime.replace('T', ' ')
                }
            })
            this.showItemList = this.itemList

        },
        async getAccountList() {
            const res = await getAccount()
            this.actions = res.data.map(item => {
                return {
                    text: item.name,
                    accountId: item.id
                }
            })
        },
        async handleDel(item) {
            Dialog.confirm({
                title: '确实删除',
                message: '是否删除该账户？',
            })
                .then(async () => {
                    const res = await delAccount(item.id)
                    if (res.code == 200) {
                        Toast.success('删除成功')
                    }
                    this.getAccountData()
                })
                .catch(() => {
                    Toast.fail('删除失败')
                    // on cancel
                });
            console.log(item, 'item');
            // return

        },
        onSelect(item) {
            console.log(item);
            this.showAccount = item.text;
            this.accountId = item.accountId

        },
        handleRoute(path) {
            this.$router.push('/' + path)
        },
        handlePop() {
            this.showPop = true
            this.switchChecked = false;
            this.shouru = ''
            this.timeVal = ''
            this.org = ''
            this.label = ''
            this.showAccount = ''
            this.accountId = ''
        },
        handleShow(flag) {
            console.log(123);

            if (flag == '0') {
                console.log(1230);
                this.show = false;
            } else if (flag == '1') {
                this.show = true;
            }
        },
        onSubmit() {

        },
        async handleDialogConfirm() {
            let res = null
            let data = {
                amount: this.shouru,
                transactionAttribute: this.switchChecked ? 1 : -1,
                accountId: this.accountId,
                accountName: this.showAccount,
                transactionTime: this.timeVal,
                remark: this.label,
                source: this.org
            }
            if (this.detailId) {
                data.id = this.detailId
                res = await updateAccountData(data)
                console.log('res', res);

            } else {
                res = await addAccountData(data)

            }
            console.log(data);
            console.log(res, 'res');
            this.typeText = '全部'
            this.handleCancel()
            this.getAccountData()
        },
        onConfirm(v) {
            console.log(v, 'vv');
            this.showPicker = false;

            const dateStr = v;

            const date = new Date(dateStr);

            const year = date.getFullYear();

            const month = String(date.getMonth() + 1).padStart(2, '0'); // 一月是0，加1后是1，补零成01

            const day = String(date.getDate()).padStart(2, '0');

            const hours = String(date.getHours()).padStart(2, '0');

            const minutes = String(date.getMinutes()).padStart(2, '0');

            const seconds = String(date.getSeconds()).padStart(2, '0');

            const formatted = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            this.timeVal = formatted
            // this.timeVal = dayjs(value).format('YYYY-MM-DD HH:mm:ss');
            // this.showPicker = false; // 关闭选择器

        },
        formatter(type, val) {
            if (type === 'year') {
                return val + '年';
            }
            if (type === 'month') {
                return val + '月';
            }
            if (type === 'day') {
                return val + '日';
            }
            return val;
        },
    }
};
</script>

<style lang="less" scoped>
.homeContent {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;

    .topInfo {
        height: 180px;
        background-color: #007aff;
        border-radius: 15px;
        padding: 20px 15px 10px;

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .zzc {
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            color: #fff;

            .itemText {
                margin-bottom: 15px;
            }

            .val {
                margin-top: 5px;
                font-size: 16px;
                font-weight: 800;
                text-align: center;
            }

            i {
                display: flex;
                align-items: center;

                &::before {
                    padding-top: 2px;
                }
            }
        }


        .itemList {
            display: flex;
            justify-content: space-between;
            padding: 0 20px;

            .item {
                .itemText {
                    font-size: 14px;
                    color: #fff;
                    margin-bottom: 15px;
                }

                .val {
                    margin-top: 5px;
                    font-size: 16px;
                    font-weight: 800;
                    text-align: center;
                }

                color: #fff;
            }
        }
    }

    .more {
        display: flex;
        justify-content: space-between;
        color: #007aff;
        margin: 10px 0;
    }

    .middleInfo {
        display: flex;
        height: 70%;

        .itemList {
            height: 100%;
            width: 100%;
            overflow: auto;

            .item {
                display: flex;
                flex: 1;
                margin-bottom: 20px;

                &:last-child {
                    margin-bottom: 0px;
                }

                .img {
                    width: 50px;
                    height: 50px;
                    border-radius: 8px;

                    img {
                        border-radius: 8px;

                        width: 100%;
                        height: 100%;
                    }
                }

                .info {
                    flex: 1;
                    margin-left: 20px;
                    background-color: #f2f2f2;
                    border-radius: 5px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    .top {
                        display: flex;
                        justify-content: space-between;

                        span {
                            flex: 1;
                            text-align: center;
                            font-size: 12px;
                        }

                    }

                    .total {
                        display: flex;
                        position: relative;
                        justify-content: space-between;

                        .van-icon {
                            position: absolute;
                            top: 50%;
                            transform: translateY(-65%);
                            right: 3px;
                        }

                        span {
                            flex: 1;
                            text-align: center;
                            font-size: 15px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }

                        .off {
                            font-size: 18px;
                            color: #f39199;
                        }

                        .on {
                            font-size: 18px;
                            color: #3dbdb7;
                        }

                    }
                }

                .del {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .system {
                    background-color: #f2d092;
                }
            }
        }
    }

    .add {
        position: absolute;
        color: #007aff;
        right: 0;
        bottom: 60px;
    }

    .accountDialog {
        width: 80%;
        height: 70%;
        padding: 30px;
        border-radius: 15px;

        .van-popover__wrapper {
            width: 100%;
            display: flex;
            justify-content: center;
        }
    }
}
</style>